<!DOCTYPE html>
<html>

<head>
    <title>使用Watcher实现状态动画</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/tween.js@16.3.4"></script>
</head>

<body>
    <div id="animated-number-demo">
        <input type="number" name="" step="20" v-model.number="number">
        <p>{{ animatedNumber }}</p>
    </div>
    <script>
    new Vue({
        el: '#animated-number-demo',
        data: {
            number: 0,
            animatedNumber: 0
        },
        watch: {
            number: function(nv, ov) {
                var vm = this

                function animate(time) {
                    requestAnimationFrame(animate)
                    TWEEN.update(time)
                }
                new TWEEN.Tween({
                        tweeningNumber: ov
                    })
                    .easing(TWEEN.Easing.Quadratic.Out)
                    .to({
                        tweeningNumber: nv
                    }, 1500)
                    .onUpdate(function() {
                        vm.animatedNumber = this.tweeningNumber.toFixed(0)
                    })
                    .start()
                animate()
            }
        }
    })
    </script>
</body>

</html>
